export function DataCardNode (name, id, image) {
    Q.doSuperConstructor(this, DataCardNode)
    this.init(name, id, image)
    // this.set('property1', data.property1)
    // this.set('property2', data.property2)
}

// r为圆角像素
var w = 230, h = 63, r = 0
DataCardNode.prototype = {
    _expandChildren: false,
    iconSize: {width: 23},
    shape: Q.Shapes.getRect(-w / 2, -h / 2, w, h, r, r),
    init: function (name, id, image) {
        // this.set("image", image);
        this.set('id', id)
        this.set('name', name)

        this.image = this.shape
        // 渐变色
        var gradient = new Q.Gradient(Q.Consts.GRADIENT_TYPE_LINEAR, ['#F4F4F4', '#FFFFFF', '#DFDFDF', '#E9E9E9'])
        gradient.angle = Math.PI / 2
        this.setStyle(Q.Styles.SHAPE_FILL_GRADIENT, gradient)
        this.setStyle(Q.Styles.SHAPE_STROKE, 0)
        this.setStyle(Q.Styles.SHAPE_OUTLINE, 1)
        this.setStyle(Q.Styles.SHAPE_OUTLINE_STYLE, '#E9E9E9')
        this.setStyle(Q.Styles.LAYOUT_BY_PATH, false)

        // 一般文字
        function addUIAt (node, ui, x, y, bindingProperty) {
            ui.syncSelection = false
            ui.zIndex = 1
            ui.position = {x: x, y: y}
            ui.anchorPosition = Q.Position.LEFT_TOP
            ui.fontSize = 14
            ui.borderRadius = 0
            // ui.alignPosition = Q.Position.MIDDLE
            // ui.size = {width:100}
            // ui.setStyle(Q.Styles.BACKGROUND_COLOR, "#2898E0");
            var binding;
          if (bindingProperty) {
                binding = {
                    property: bindingProperty,
                    propertyType: Q.Consts.PROPERTY_TYPE_CLIENT,
                    bindingProperty: 'data'
                }
            }
            node.addUI(ui, binding)
            return ui
        }
        // 标题文字
        function addUIAtTitle (node, ui, x, y, fontSize) {
            ui.syncSelection = false
            ui.zIndex = 1
            ui.position = {x: x, y: y}
            ui.anchorPosition = Q.Position.LEFT_TOP
            // ui.anchorPosition = Q.Position.CENTER_TOP
            ui.fontSize = fontSize
            ui.fontWeight = 900
            ui.fontStyle = 'bold'
            ui.borderRadius = 0
            ui.alignPosition = Q.Position.RIGHT_MIDDLE
            // ui.size = {width:100}
            // ui.setStyle(Q.Styles.BACKGROUND_COLOR, "#2898E0");
            // ui.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.CENTER_MIDDLE)
            node.addUI(ui)
            return ui
        }
        // 标题图标
      /*if (image) {
        var icon = new Q.ImageUI(image);
        icon.size = this.iconSize
        addUIAt(this, icon, 15, 12, 'icon').anchorPosition = Q.Position.CENTER_MIDDLE
      }*/
      // 绘画标题: 居中于模块显示
        addUIAtTitle(this, new Q.LabelUI(name), w / 2 - (name.length / 2) * 16, 5, 16)

        // 显示数据开始
        var key1UI = new Q.LabelUI()
        key1UI.size = {width: 50}
        key1UI.alignPosition = Q.Position.LEFT_MIDDLE
        addUIAt(this, key1UI, 55, 35, 'key1').anchorPosition = Q.Position.RIGHT_MIDDLE
        var key2UI = new Q.LabelUI()
        key2UI.size = {width: 50}
        key2UI.alignPosition = Q.Position.RIGHT_MIDDLE
        // key2UI.backgroundColor = '#0f0'
        addUIAt(this, key2UI, 60, 53, 'key2').anchorPosition = Q.Position.RIGHT_MIDDLE

        var pro1UI = new Q.LabelUI()
        pro1UI.size = {width: 100}
        pro1UI.alignPosition = Q.Position.MIDDLE
        // pro1UI.backgroundColor = '#0f0'
        var pro1 = addUIAt(this, pro1UI, 63, 35, 'property1')
        pro1.anchorPosition = Q.Position.LEFT_MIDDLE
        pro1.color = '#000'

        var pro2UI = new Q.LabelUI()
        pro2UI.size = {width: 100}
        pro2UI.alignPosition = Q.Position.MIDDLE
        // pro2UI.backgroundColor = '#0f0'
        var pro2 = addUIAt(this, pro2UI, 63, 53, 'property2')
        pro2.anchorPosition = Q.Position.LEFT_MIDDLE
        pro2.color = '#000'

        var uit1UI = new Q.LabelUI()
        uit1UI.size = {width: 57}
        uit1UI.alignPosition = Q.Position.RIGHT_MIDDLE
        var unit1 = addUIAt(this, uit1UI, 160, 35, 'unit1')
        unit1.anchorPosition = Q.Position.LEFT_MIDDLE
        unit1.color = '#000'

        var uit2UI = new Q.LabelUI()
        uit2UI.size = {width: 57}
        uit2UI.alignPosition = Q.Position.RIGHT_MIDDLE
        // uit2UI.backgroundColor = '#0f0'
        var unit2 = addUIAt(this, uit2UI, 160, 53, 'unit2')
        unit2.anchorPosition = Q.Position.LEFT_MIDDLE
        unit2.color = '#000'
    },
    updateExpandChildrenHandler: function () {
        if (!this._expandChildrenHandler) {
            var handler = this._expandChildrenHandler = new Q.ImageUI()
            handler.position = {x: 200, y: 0}
            handler.size = {width: 10, height: 10}
            handler.anchorPosition = Q.Position.LEFT_TOP
            handler.name = 'handler'
            handler.showPointer = true
            handler.alpha = 0.8
            handler.syncSelection = false
            handler.backgroundColor = 'rgba(0,0,0,0)'
            handler.padding = 5
            handler.fontSize = 14
            handler.font = 'Arial'

            this.addUI(handler)
        }

         function getHandlerLabel (node) {
            if (!node.hasChildren()) {
                return null
            }
            return node.expandChildren ? '/static/img/collapse.svg' : '/static/img/expand.svg'
        }

        this._expandChildrenHandler.data = getHandlerLabel(this)
      // console.log("this._expandChildrenHandler.data ", this._expandChildrenHandler.data);
    },
    checkChildrenVisibility: function () {
        function checkChildren () {
            var visible = this.visible !== false && this.expandChildren
            this.forEachChild(function (child) {
                child.visible = visible
                checkChildren.call(child)
            })
        }
        checkChildren.call(this)
    },
    reverseExpanded: function () {
        this.expandChildren = !this.expandChildren
    }

}
Q.extend(DataCardNode, Q.Node)

Object.defineProperties(DataCardNode.prototype, {
        visible: {
            get: function () {
                return this._visible !== false
            },
            set: function (v) {
                if (this.visible === v) {
                    return
                }
                this._visible = v
                this.invalidateVisibility()
                this.invalidate()
            }
        },
        expandChildren: {
            get: function () {
                return this._expandChildren
            },
            set: function (v) {
                var old = this._expandChildren
                this._expandChildren = v
                this.onEvent(new Q.PropertyChangeEvent(this, 'expandChildren', v, old))
                this.checkChildrenVisibility()
                this.updateExpandChildrenHandler()
                if (this.hasChildren()) {
                    this.forEachChild(function (child) {
                        child.updateExpandChildrenHandler()
                    })
                }
                this.invalidate()
            }
        }
    })
